﻿<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>好房东-注册</title>
<meta name="description" content="好房东" />
<meta name="keywords" content="好房东" />
<link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/css/log_reg.css" />
<!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"> </script><![endif]-->
<!--[if IE 6]>
    <script type="text/javascript" src="js/dd_belatedpng.js" ></script>
    <script> DD_belatedPNG.fix('img,div,li,em,i,h3,.png,a'); </script>
    <![endif]-->
        <script language="JavaScript">
          //  判断设备类型 跳转手机端
            /*function mobile_device_detect(url) {
                var thisOS = navigator.platform;
                var os = new Array("iPhone", "iPod", "iPad", "android", "Nokia", "SymbianOS", "Symbian", "Windows Phone", "Phone", "Linux armv71", "MAUI", "UNTRUSTED/1.0", "Windows CE", "BlackBerry", "IEMobile");
                for (var i = 0; i < os.length; i++) {
                    if (thisOS.match(os[i])) {
                        window.location = url
                    }
                }
                if (navigator.platform.indexOf('iPad') != -1) {
                    window.location = url
                }
                var check = navigator.appVersion;
                if (check.match(/linux/i)) {
                    if (check.match(/mobile/i) || check.match(/X11/i)) {
                        window.location = url
                    }
                }
                Array.prototype.in_array = function(e) {
                    for (i = 0; i < this.length; i++) {
                        if (this[i] == e) return true
                    }
                    return false
                }
            }
            mobile_device_detect("www.baidu.com");*/
        </script>
</head>
<body>
<!-- header -->
<div class="page-wrap _register">
  <div class="form-box">
            <form method="post" id="loginForm" novalidate="novalidate">
                <a href="/" class="_logo"></a>
                <div class="fields">
                    <div class="form-field">
                        <label>
                            <input autocomplete="off" class="field-ipt" data-val="true" data-val-phone="手机号格式不正确" data-val-required="请输入手机号" id="Phone" name="Phone" placeholder="请输入手机号/邮箱" type="text" value="">
                        </label>
                    </div>
                    <div class="form-field">
                        <label><input type="password" autocomplete="off" placeholder="设置密码" name="password" class="field-ipt" id="password"><i class="icon-eye js-toggle-pwd"></i></label>
                    </div>
                    <div class="form-field">
                        <label><input type="password" autocomplete="off" placeholder="确认密码" name="passwordAgain" class="field-ipt"><i class="icon-eye js-toggle-pwd"></i></label>
                    </div>
                    <div class="form-field verify-graph-field" id="verify-graph" style="display: none;"></div>
                </div>
                <div class="slider-bar" id="slider-bar">
                    <input type="hidden" id="roboCheck">
                    <div class="slider-thumb js-thumb">
                        <i class="thumb-icon"></i>
                    </div>
                    <div class="slider-text">
                        <span class="bg-swiped js-swiped">拖动滑块至最右端完成验证</span>
                        <span class="text js-text"><span data-text-inner="">拖动滑块至最右端完成验证</span></span>
                    </div>
                </div>
                <div class="form-field" id="verify-code"></div>
                <div class="error-box" id="error-box">
                    <span id="error-text"></span>
                </div>
                <div class="btn-box">
                    <input type="submit" value="注  册" class="sub-btn">
                </div>
                <div class="extra">
                    <div class="extra-left" style="text-align:center;font-size:12px">
                        <label class="theme-checkbox" style="margin-top:-2px;"><input type="checkbox" checked="" name="protocol"><i class="icon-check"></i></label>
                        同意<a href="javascript:;" class="site-protocol js-open-modal" data-target="#modal-protocol">《好房东服务条款》</a>
                    </div>
                    <span class="extra-right" style="font-size:12px;">
                        已有账号？现在就  <a href="./login" class="to-regi">登录</a>
                    </span>
                </div>

            </form>
        </div>
</div>
<script src="__STATIC__/js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="__STATIC__/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="__STATIC__/js/my_verify.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function () {
            
            var codeVerifyer = $.my_verify('#verify-code', '#verify-graph', {   //等同于 $.uoko_verify({hook:'#verify-hook',graph:{hook:'#graph-hook'} ....})
                //常用配置
                input: {
                    //props为生成标签属性
                    props: {
                        class: 'field-ipt field-get-code',
                        name: 'verifyCode',
                        id: 'verifyCode',
                        autocomplete: 'off'
                    }
                },
                btn: {
                    props: {
                        class: 'get-code disabled',
                        id: 'getCode'
                    },
                },
                graph:{
                    input: {
                        props: {
                            class: 'field-ipt graph-ipt'
                        }
                    }
                },
                //关联的电话号码字段id
                phoneInput: '#Phone',
                //codeType
                codeType: 1,
                //修改默认的提示组件
                components: {
                    $info: function (msg) {
                        $('#error-box').addClass('show');
                        $('#error-text').html(msg);
                    }
                }
            });



        if ("" != null && $.trim("") !== '') {
            $('#error-box').addClass('show');
            $('#error-text').html("");
        }

        $.validator.methods.phone = function (value, element) {
            return this.optional(element) || /^1[3|4|5|7|8]\d{9}$/.test(value);
        };

        function isEmptyObj(obj) {
            for (var i in obj) {
                return false;
            }
            return true;
        }
        var errorCollection = {};
        var validator = $("#loginForm").validate({
            rules: {
                protocol: {
                    required: true
                },
                Phone: {
                    required: true,
                    remote: '/api/user/can-join'//远程验证地址,返回json字符串: true(通过)或false,undefined,null(验证不通过)
                },
                password: {
                    required: true,
                    minlength: 6

                },
                passwordAgain: {
                    equalTo: "#password"
                },
                verifyCode: {
                    required: true
                }
            },
            messages: {
                protocol: "请勾选同意服务协议",
                Phone: {
                    required: "请输入手机号/邮箱",
                    phone: "请输入真实的手机号码",
                    remote: '该号码已注册，请直接登录'//远程验证错误信息
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 6 个字符"
                },
                passwordAgain: {
                    equalTo: "两次输入不一致"
                },
                verifyCode: {
                    required: "请输入验证码",
                }
            },

            showErrors: function (errorMap, errorList) {
                var $errorBox = $('#error-box');
                var $errorText = $('#error-text');

                if (this.numberOfInvalids() && !$errorBox.hasClass('show')) {
                    $errorBox.addClass('show');
                } else if (!this.numberOfInvalids()) {
                    $errorBox.removeClass('show');
                    $errorText.html('');

                    return;
                }

                var isEmpty = isEmptyObj(errorMap);

                if (isEmpty) {
                    errorMap = {};
                    this.currentElements.each(function () {
                        var name = $(this).attr('name');
                        if (!errorMap[name]) {
                            errorMap[name] = '';
                        }
                    });
                }

                errorCollection = $.extend(errorCollection, errorMap);

                $errorText.html(function () {
                    for (var i in errorCollection) {
                        if (errorCollection[i]) {
                           return errorCollection[i];
                        }
                    }
                    return '';
                });

            }
        });

        ; (function fixHolder(win, doc, undefined) {
            var isSupport = 'placeholder' in doc.createElement('input');

            if (isSupport) {
                return;
            }
            function byAttr(el, attr) {
                if (!el) {
                    return;
                }
                var ret = [];
                el = el.length ? el : [el];

                for (var i = 0; i < el.length; i++) {

                    if (el[i].getAttribute && el[i].getAttribute(attr) !== null) {
                        ret.push(el[i]);
                    }
                }

                return ret;
            }
            function isObj(obj) {

                return String.prototype.slice.call(obj) === '[object Object]';
            }
            function pageX(el) {

                return el.offsetParent ? el.offsetLeft + pageX(el.offsetParent) : el.offsetLeft;
            }
            function pageY(el) {

                return el.offsetParent ? el.offsetTop + pageX(el.offsetParent) : el.offsetTop;
            }
            function parentX(el) {

                return el.offsetParent === el.parentNode ? el.offsetLeft : pageX(el) - pageX(el.parentNode);
            }
            function parentY(el) {

                return el.offsetParent === el.parentNode ? el.offsetTop : pageY(el) - pageY(el.parentNode);
            }
            function getStyle(el, style) {

                if (!style) {

                    return null;
                }

                if (el.currentStyle) {

                    return el.currentStyle[style];
                }

                if (win.getComputedStyle) {
                    style = style.replace(/([A-Z])/, '-$1').toLocaleLowerCase();

                    return win.getComputedStyle(el, '')[style];
                }

                return null;
            }
            function trim(val) {
                val && val.replace(/^(\s+)|(\s+)$/, '');

                return val;
            }
            function createNode(name, prop) {
                var node = doc.createElement(name);

                if (!prop) {

                    return node;
                }

                if (!isObj(prop)) {

                    throw new Error('argument should be a Object');
                }

                for (var i in prop) {

                    if (prop.hasOwnProperty(i)) {

                        if (isObj(prop[i])) {
                            for (var j in prop[i]) {
                                if (prop[i].hasOwnProperty(j)) {
                                    node.style[j] = prop[i][j];
                                }
                            }

                            continue;
                        }
                        node[i] = prop[i]
                    }
                }

                return node;
            }
            function addEvent(el, evt, cb) {

                if (el.addEventListener) {
                    el.addEventListener(evt, cb, false);

                } else {
                    el.attachEvent('on' + evt, function (e) {
                        e = e || win.event;
                        e.target = e.srcElement;
                        e.stopPropagation = function () {
                            e.cancelBubble = true;
                        };
                        e.preventDefault = function () {
                            e.returnValue = false;
                        };
                        cb.call(el, e);
                    });
                }
            }


            function fix(els) {
                if (/Array/.test(Object.prototype.toString.call(els)) && !els.length) {
                    return;
                }
                els = els.length ? els : [els];

                for (var i = 0; i < els.length; i++) {
                    var parent = els[i].parentNode || doc.body;
                    var pos = getStyle(parent, 'position');
                    var top = parseInt(getStyle(els[i], 'paddingTop'), 10) + parentY(els[i]);
                    var left = parseInt(getStyle(els[i], 'paddingLeft'), 10) + parentX(els[i]);
                    var t = els[i].getAttribute('placeholder');

                    if (pos.toLowerCase() === 'static') {
                        parent.style.position = 'relative';
                    }

                    var node = createNode('span', {
                        style: {
                            position: 'absolute',
                            left: left + 'px',
                            top: top + 'px',
                            whiteSpace: 'nowrap',
                            lineHeight: getStyle(els[i], 'lineHeight')
                        },
                        className: '_fake_placeholder_',
                        innerHTML: t
                    });

                    els[i].fakeHolder = node;
                    node.el = els[i];
                    parent.appendChild(node);
                    els[i].value !== '' && (node.style.display = 'none');
                    addEvent(els[i].fakeHolder, 'click', function (e) {
                        this.el.focus();
                    });
                    addEvent(els[i], 'focus', function (e) {
                        this.fakeHolder.style.display = 'none';
                    });
                    addEvent(els[i], 'blur', function (e) {
                        var val = trim(this.value);

                        if (val === '') {
                            this.fakeHolder.style.display = 'block';
                        }
                    })
                }
            }

            var els = doc.getElementsByTagName('input');
            els = byAttr(els, 'placeholder');

            fix(els);

        })(window, document);

        var thumbSlider = (function (win, doc, undefined) {
            var obj = {
                init: function (opt) {
                    var txt = '';
                    this.$el = typeof opt.$el === 'string' ? $(opt.$el) : opt.$el;
                    if (!this.$el) {
                        return;
                    }
                    this.$thumb = this.$el.find('.js-thumb');
                    this.$swiped = this.$el.find('.js-swiped');
                    this.$text = this.$el.find('.js-text');
                    txt = this.$text.html();
                    this.$swiped.html(txt);
                    this.$text.html('<span data-text-inner>' + txt + '</span>');
                    this.done = opt.done || function () { };
                    this.beforeDone = opt.beforeDone || function () { };
                    this.touchedBord = false;
                    this.isDone = false;

                    this.bind();
                },
                bind: function () {
                    var me = this;
                    var size = this.$el.outerWidth();
                    var thumbSize = this.$thumb.outerWidth();
                    var limit = size - thumbSize;
                    var posStart, diff, left, temp;

                    this.$text.find('[data-text-inner]').css({
                        width: size,
                        height: '100%',
                        position: 'absolute',
                        right: 0,
                        top: 0
                    });
                    this.$thumb.on('dragstart', function () {
                        return false;
                    });
                    this.$thumb.on('mousedown.slide', function (e) {
                        if (me.isDone) {
                            return;
                        }
                        me.$thumb.removeClass('roll-back');
                        me.$text.removeClass('roll-back');

                        posStart = e.clientX;
                        left = me.$thumb.css('left');
                        left = parseInt(left);

                        $(doc).on('mousemove.slide', function (e) {

                            diff = e.clientX - posStart;
                            temp = left + diff;

                            temp = temp <= 0 ? 0 : temp >= limit ? limit : temp;
                            me.$thumb.css('left', temp);
                            me.$text.css('width', size - temp);

                            if (temp === limit) {
                                !me.touchedBord && me._done();
                            }
                        });

                        $(doc).on('mouseup', function () {
                            $(doc).off('mousemove.slide');

                            if (me.isDone) {
                                return;
                            }
                            me.rollBack();
                        })
                    });
                },
                rollBack: function () {
                    this.touchedBord = false;
                    this.$thumb.css('left', 0).addClass('roll-back');
                    this.$text.css('width', '100%').addClass('roll-back');
                },
                _done: function () {
                    this.touchedBord = true;
                    if (this.beforeDone() === false) {
                        return;
                    }
                    this.done();
                    this.isDone = true;
                    $(doc).off('mousemove.slide');
                    this.$text.css('width', '100%')
                    this.$el.addClass('done');
                }
            };

            win.thumbSlider = obj;
            return obj;
        })(window, document);

        thumbSlider.init({
            $el: '#slider-bar',
            done: function () {

                this.$text.html('验证通过');
                $('#sub-btn').prop('disabled', false);
            },
            beforeDone: function () {//添加完成验证前的逻辑，return false 则done函数不会执行
                if (!validator.element('#Phone')) {
                    return false;
                }
                //codeVerifyer.$btn.removeClass('disabled');
                codeVerifyer.$btn.trigger('click');
            }
        });

        //简单弹出层
        ; (function simpleModal() {

            function hasScrollBar() {
                return document.body.scrollTop === (document.body.scrollTop = 1);
            }

            function getScrollBarWidth() {

                if (!hasScrollBar()) {
                    return 0;
                }

                var el = $('<div style="position:absolute;z-index:-99;visibility:hidden;height:100px;width:100px;overflow: auto"></div>');
                var ch = $('<div style="height: 200px;"></div>');
                var ret = 0;

                el.append(ch);
                $('body').append(el);
                ret = 100 - ch.width();
                el.remove();
                el = null;
                ch = null;
                return ret;
            }

            var scrollWidth = getScrollBarWidth();


            function showModal(selector) {
                var $body = $('body');
                var $modal = $(selector);


                !$body.data('modal_bg') && $body.data('modal_bg', $('<div class="modal-bg">'));

                $body.append($body.data('modal_bg'));
                $modal.addClass('show');
                $body.addClass('modal-show');

                if (scrollWidth) {
                    !$body.data('oldPad') && $body.data('oldPad', $body.css('paddingRight'));
                    $body.css('paddingRight', scrollWidth);
                }


            }

            function hideModal() {
                var $body = $('body');
                if ($body.data('modal_bg')) {
                    $body.data('modal_bg').remove();
                }
                $body.removeClass('modal-show');
                $body.css('paddingRight', $body.data('oldPad'));
                $('.js-modal').removeClass('show');
            }
            //服务条款 功能暂时关闭
            /*$('.js-open-modal').click(function (e) {
                e.preventDefault();
                showModal($(this).attr('data-target'));

            });
            $('.js-modal').on('click', function (e) {
                if (e.target === this) {
                    hideModal();
                }

            });*/

            $('.js-modal').on('click', '.js-close', function () {
                hideModal();
            });

            $('.js-toggle-pwd').click(function () {

                var ipt = $(this).prev('input');

                $(this).toggleClass('open');
                ipt.prop('type', $(this).hasClass('open') ? 'text' : 'password');
            });

        })()

    })
    </script>
</body>
</html>